<template>
  <div class="main">
    <div class="mainTable">
      <el-table
        :data="tableData"
        border>
        <el-table-column
          prop="cust_no"
          label="客户号"></el-table-column>
        <el-table-column
          prop="cns_name"
          label="客户名"></el-table-column>
        <el-table-column
          prop="id_type"
          label="证件种类"></el-table-column>
        <el-table-column
          prop="id_no"
          label="证件号码"></el-table-column>
        <el-table-column
          prop="phone_num"
          label="手机号"></el-table-column>
        <el-table-column
          prop="cust_mgr_no"
          label="客户经理号"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="278px">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="fullInfo(scope.row)">详细信息</el-button>
            <el-button type="text" size="mini" @click="handleClick(scope.row)">相似人群</el-button>
            <el-button type="text" size="mini" @click="userPic(scope.row)">客户画像</el-button>
            <el-button type="text" size="mini" @click="tagsMap(scope.row)">客户关系图</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination" style="margin-top: 12px;" v-if="pagination">
      <el-pagination
        layout="total, prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="paginationConfig.pageSizes"
        :total="userList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"></el-pagination>
    </div>

    <div>
      <el-dialog title="选择标签" :visible.sync="tagDialog" @close="handleCloseTagsSelectDialog" :close-on-click-modal="false">
        <div>
          <div class="tags-item" v-for="(item, index) in userTags" :key="index">
            <p>{{item.name}}</p>
            <p v-if="item.controls.length === 0" style="text-align: center">暂无数据</p>
            <div v-if="item.controls.length !== 0">
              <el-checkbox v-model="checkAll[index].checkAll" @change="handleCheckAllChange($event, index)">全选</el-checkbox>
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="checkedTags[index].checkboxsAll" @change="handleCheckedCitiesChange(index)">
                <el-checkbox v-for="(lab, subIndex) in item.controls" :label="lab" :key="subIndex">{{lab.lab_cns}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div>
            <el-button type="primary" @click="similarPeop()" size="small" style="margin-left: 490px; margin-top: 30px">确定</el-button>
            <el-button size="small" @click="tagDialog = false">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>

    <div class="mainDialog">
      <el-dialog center width="65%" :title="userData['cns_name'] + ' 详细信息'" :visible.sync="fullInfoDialog" @closed="handleClose">
        <!-- <div>
          <dl class="infos">
            <dt class="info-item-title">基本信息</dt>
            <dd class="info-item-content">
              <div>中文姓名：{{userData['cns_name']}}</div>
              <div>英文姓名：{{userData['ens_name']}}</div>
              <div>客户号：{{userData['cust_no']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>证件类型：{{userData['id_type']}}</div>
              <div>证件号：{{userData['id_no']}}</div>
              <div>客户识别码：{{userData['cust_id']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>国籍：{{userData['nat_cod']}}</div>
              <div>民族：{{userData['race_cod']}}</div>
              <div>婚姻状况：{{userData['cust_marrg_stat']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>曾用中文名：{{userData['old_cns']}}</div>
              <div>曾用英文名：{{userData['old_ens']}}</div>
              <div>出生日期：{{userData['birdy_dt']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>性别：{{userData['sex_id']}}</div>
              <div>性别确认方式：{{userData['sex_conf_way']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>最高学历：{{userData['max_dgr']}}</div>
              <div>最高学位：{{userData['max_cod']}}</div>
            </dd>

            <dt class="info-item-title">金融信息</dt>
            <dd class="info-item-content">
              <div>客户实体标志：{{userData['cust_ent_typ']}}</div>
              <div>员工标志：{{userData['cust_emp_flg']}}</div>
              <div>股东标志：{{userData['cust_stker_flg']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>VIP标志：{{userData['cust_vip_flg']}}</div>
              <div>黑名单标志：{{userData['cust_bc_flg']}}</div>
            </dd>

            <dt class="info-item-title">联系信息</dt>
            <dd class="info-item-content">
              <div>手机号：{{userData['phone_num']}}</div>
              <div>居住地址：{{userData['live_addr']}}</div>
              <div>居住地区域代码：{{userData['live_area_cod']}}</div>
            </dd>

            <dt class="info-item-title">机构信息</dt>
            <dd class="info-item-content">
              <div>总部机构号：{{userData['headq_inn_inst_no']}}</div>
              <div>机构号：{{userData['inn_inst_no']}}</div>
              <div>机构代码：{{userData['cred_org_cod']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>机构中文名：{{userData['mgr_inst_cns']}}</div>
              <div>机构英文名：{{userData['mrg_inst_ens']}}</div>
            </dd>

            <dt class="info-item-title">数据信息</dt>
            <dd class="info-item-content">
              <div>客户经理号：{{userData['cust_mgr_no']}}</div>
              <div>数据安全级别：{{userData['data_secur_lvl']}}</div>
              <div>数据加载时间：{{userData['load_time']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>客户信息来源：{{userData['cust_org']}}</div>
              <div>首次登记日期：{{userData['fst_reg_dt']}}</div>
              <div>最后变更日期：{{userData['lst_modi_dt']}}</div>
            </dd>
            <dd class="info-item-content">
              <div>数据日期：{{userData['data_date']}}</div>
              <div>开始日期：{{userData['pm_begin_dt']}}</div>
              <div>结束日期：{{userData['pm_end_dt']}}</div>
            </dd>
          </dl>
        </div> -->

        <table border="1" width="100%" class="native-table">
          <tbody>
            <tr class="table-title">
              <td colspan="6">基本信息</td>
            </tr>
            <tr>
              <td>中文姓名：</td><td>{{userData['cns_name']}}</td>
              <td>英文姓名：</td><td>{{userData['ens_name']}}</td>
              <td>客户号：</td><td>{{userData['cust_no']}}</td>
            </tr>
            <tr>
              <td>证件类型：</td><td>{{userData['id_type']}}</td>
              <td>证件号：</td><td>{{userData['id_no']}}</td>
              <td>客户识别码：</td><td>{{userData['cust_id']}}</td>
            </tr>
            <tr>
              <td>国籍：</td><td>{{userData['nat_cod']}}</td>
              <td>民族：</td><td>{{escape(commonData, 'G010106', userData['race_cod']) || userData['race_cod']}}</td>
              <td>婚姻状况：</td><td>{{userData['cust_marrg_stat']}}</td>
            </tr>
            <tr>
              <td>曾用中文名：</td><td>{{userData['old_cns']}}</td>
              <td>曾用英文名：</td><td>{{userData['old_ens']}}</td>
              <td>出生日期：</td><td>{{userData['birdy_dt']}}</td>
            </tr>
            <tr>
              <td>性别：</td><td>{{escape(commonData, 'G020003', userData['sex_id']) || userData['sex_id']}}</td>
              <td>性别确认方式：</td><td>{{escape(commonData, 'G020003', userData['sex_conf_way']) || userData['sex_conf_way']}}</td>
              <td></td><td></td>
            </tr>
            <tr>
              <td>最高学历：</td><td>{{escape(commonData, 'G020005', userData['max_dgr']) || userData['max_dgr']}}</td>
              <td>最高学位：</td><td>{{userData['max_cod']}}</td>
              <td></td><td></td>
            </tr>
          </tbody>
        </table>

        <table border="1" width="100%" class="native-table">
          <tbody>
            <tr class="table-title">
              <td colspan="6">金融信息</td>
            </tr>
            <tr>
              <td>客户实体类型：</td><td>{{userData['cust_ent_typ']}}</td>
              <td>员工标志：</td><td>{{userData['cust_emp_flg']}}</td>
              <td>股东标志：</td><td>{{userData['cust_stker_flg']}}</td>
            </tr>
            <tr>
              <td>VIP标志：</td><td>{{userData['cust_vip_flg']}}</td>
              <td>黑名单标志：</td><td>{{userData['cust_bc_flg']}}</td>
              <td>客户经理号：</td><td>{{userData['cust_mgr_no']}}</td>
            </tr>
          </tbody>
        </table>

        <table border="1" width="100%" class="native-table">
          <tbody>
            <tr class="table-title">
              <td colspan="6">联系信息</td>
            </tr>
            <tr>
              <td>手机号：</td><td>{{userData['phone_num']}}</td>
              <td>居住地址：</td><td>{{userData['live_addr']}}</td>
              <td>居住地区域代码：</td><td>{{userData['live_area_cod']}}</td>
            </tr>
          </tbody>
        </table>

        <table border="1" width="100%" class="native-table">
          <tbody>
            <tr class="table-title">
              <td colspan="6">机构信息</td>
            </tr>
            <tr>
              <td>总部机构号：</td><td>{{userData['headq_inn_inst_no']}}</td>
              <td>机构号：</td><td>{{userData['inn_inst_no']}}</td>
              <td>机构代码：</td><td>{{userData['cred_org_cod']}}</td>
            </tr>
            <tr>
              <td>机构中文名：</td><td>{{userData['mgr_inst_cns']}}</td>
              <td>机构英文名：</td><td>{{userData['mrg_inst_ens']}}</td>
              <td></td><td></td>
            </tr>
          </tbody>
        </table>

        <table border="1" width="100%" class="native-table">
          <tbody>
            <tr class="table-title">
              <td colspan="6">数据信息</td>
            </tr>
            <tr>
              <td>客户信息来源：</td><td>{{userData['cust_org']}}</td>
              <td>数据安全级别：</td><td>{{userData['data_secur_lvl']}}</td>
              <td>数据加载时间：</td><td>{{userData['load_time']}}</td>
            </tr>
            <tr>
              <td>数据日期：</td><td>{{userData['data_date']}}</td>
              <td>首次登记日期：</td><td>{{userData['fst_reg_dt']}}</td>
              <td>最后变更日期：</td><td>{{userData['lst_modi_dt']}}</td>
            </tr>
            <tr>
              <td>开始日期：</td><td>{{userData['pm_begin_dt']}}</td>
              <td>结束日期：</td><td>{{userData['pm_end_dt']}}</td>
              <td></td><td></td>
            </tr>
          </tbody>
        </table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/ajax'
  import { mapMutations } from 'vuex'
  import { codeEscape } from '../../../../assets/js/mixins.js'
  export default {
    mixins: [codeEscape],
    props: {
      queryItemDetailURL: {
        type: String,
        required: true,
        default: api.USER_DETAIL_QUERY
      },
      userList: {
        type: Array,
        required: true
      },
      pagination: {
        type: Boolean,
        required: false,
        default: false
      },
      paginationConfig: {
        type: Object,
        required: false,
        default () {
          return {
            pageSizes: [10, 20, 30, 40, 50],
            pageSize: 10,
            initPage: 1
          }
        }
      }
    },
    data () {
      return {
        commonData: [],
        fullInfoDialog: false,
        pageSize: 0,
        currentPage: 1,
        userData: {},
        loadingInstance: null,
        tagDialog: false,
        userTags: '',
        selectedTags: '',
        isIndeterminate: true,
        custNo: '',
        checkAll: [
          {
            checkAll: false
          },
          {
            checkAll: false
          },
          {
            checkAll: false
          },
          {
            checkAll: false
          }
        ],
        checkedTags: [
          {
            id: 'C01',
            checkboxsAll: []
          },
          {
            id: 'C02',
            checkboxsAll: []
          },
          {
            id: 'C03',
            checkboxsAll: []
          },
          {
            id: 'C04',
            checkboxsAll: []
          }
        ]
      }
    },
    computed: {
      tableData () {
        if (this.pagination) {
          const pages = Math.ceil(this.userList.length / this.pageSize)
          for (let i = 0; i < pages; i++) {
            const groupItem = this.userList.slice(i * this.pageSize, (i + 1) * this.pageSize)
            if (this.currentPage === (i + 1)) {
              return groupItem
            }
          }
        } else {
          return this.userList
        }
      }
    },
    mounted () {
      this.commonData = JSON.parse(sessionStorage.getItem('commonData'))
      this.pageSize = this.paginationConfig.pageSize
      this.currentPage = this.paginationConfig.initPage
    },
    created () {
      for (let index in this.userTags) {
        this.$set(this.checkedTags, index, [])
      }
    },
    methods: {
      ...mapMutations([
        'updateCustTags'
      ]),
      // 全选方法
      handleCheckAllChange (val, index) {
        if (val) {
          this.checkedTags[index].checkboxsAll = this.userTags[index].controls
        } else {
          this.checkedTags[index].checkboxsAll = []
        }
        // this.checkAll[index].checkAll = val ? this.checkedTags[index] : []
      },
      //  用来提交mutation
      updateMua () {
        let params = {
          custTags: this.userTags,
          selecteIds: this.checkedTags
        }
        this.updateCustTags(params)
      },
      // 相似人群点击确定之后 更新mua 发射事件和客户号
      similarPeop () {
        this.tagDialog = false
        this.updateMua()
        this.checkedTags = [
          {
            id: 'C01',
            checkboxsAll: []
          },
          {
            id: 'C02',
            checkboxsAll: []
          },
          {
            id: 'C03',
            checkboxsAll: []
          },
          {
            id: 'C04',
            checkboxsAll: []
          }
        ]
        let data = {
          custNo: this.custNo
        }
        this.$emit('similarPeople', data)
      },
      // 全选的判断
      handleCheckedCitiesChange (index) {
        if (this.checkedTags[index].checkboxsAll.length === this.userTags[index].controls.length) {
          this.checkAll[index].checkAll = true
        } else {
          this.checkAll[index].checkAll = false
        }
      },
      // 点击详细信息
      handleClick (row) {
        this.custNo = row.cust_no
        let params = {
          cust_no: row.cust_no
        }
        ajax.post(api.SIMILAR_PEOPLE, params)
          .then(res => {
            this.loading.close()
            this.userTags = res.data.conditions
            this.tagDialog = true
          })
        this.loading = this.$loading({fullscreen: false, target: '#accurate'})
      },
      fullInfo (row) {
        if (row) {
          ajax.post(this.queryItemDetailURL, {'cust_no': row['cust_no']})
            .then(res => {
              this.loadingInstance.close()
              this.userData = res.data
              this.fullInfoDialog = true
            })
            .catch(err => {
              this.loadingInstance.close()
              console.error(err)
            })
          this.loadingInstance = this.$loading({fullscreen: true})
        }
      },
      // 点击用户画像
      userPic (row) {
        const params = {'cust_no': row['cust_no']}
        this.$emit('userPic', params)
      },
      tagsMap (row) {
        const params = {'cust_no': row['cust_no'], 'cns_name': row['cns_name']}
        this.$emit('tagsMap', params)
      },
      handleSizeChange (pageSize) {
        this.pageSize = pageSize
      },
      handleCurrentChange (currentPage) {
        this.currentPage = currentPage
        this.$emit('currenPageChange', currentPage)
      },
      handleClose () {
        this.userData = {}
      },
      handleCloseTagsSelectDialog () {
        this.checkedTags = this.checkedTags.map(item => ({id: item.id, checkboxsAll: []}))
      }
    }
  }
</script>

<style lang="stylus" scoped>
.main
  .mainDialog
    /* .infos
      .info-item-title
        margin 32px 0 6px 0
        font-size 16px
      .info-item-content
        margin-bottom 6px
        padding-left 42px
        display flex
        flex-flow row nowrap
        &:last-of-type
          margin-bottom 0
        & > div
          flex 0 0 33.3% */

    .native-table
      margin-top 24px
      border-collapse collapse
      border-color #DDD
      border none

      &:first-of-type
        margin-top 0

      .table-title
        height 32px
        line-height 32px
        text-align center
        font-size 18px
        color #666

      td
        padding-left 12px
        height 24px
        line-height 24px

  .tags-item
    margin-bottom 14px

    p
      margin-bottom 6px

    &:last-of-type
      margin-bottom 0
</style>
